<template>
  <div class="warning-container">
    <!-- 修改储能站信息弹框 -->
    <div>
      <el-dialog
        :title="warningformTitle"
        :visible.sync="warningFormVisible"
        width="35%"
      >
        <el-form :model="warningform" ref="warningForm" label-width="100px">
          <el-form-item label="编号">
            {{warningform.id}}
          </el-form-item>
          <el-form-item label="处理措施">
            <el-input
              v-model="warningform.solution"
              auto-complete="off"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="处理状态">
            <el-select
              v-model="value"
              placeholder="请选择"
              style="width: 300px"
            >
              <el-option
                v-for="item in selectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="sureFormSubmit">提 交</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 报警信息展示 -->
    <div class="warning-container-top">
      <div class="chart-table1-container">
        <!-- <div class="dashboard-text">仪表盘 Dashboard</div>
      <p class="gray-text">储能站的所有细节信息都在这里...</p> -->
        <div class="charts-wrapper1 flex-container">
          <Chart Id="week-line" :option="weekOption" />
          <Chart Id="typeweek-line" :option="typeweekOption" />
        </div>
        <div class="charts-wrapper2 flex-container">
          <Chart Id="status-pie" :option="statusOption" />
          <Chart Id="type-pie" :option="typeOption" />
          <Chart Id="bmu-pie" :option="bmuOption" />
        </div>
      </div>
      <div class="profile-container">
        <user-profile :userInfo="userInfo" />
        <station-profile :stationInfo="stationInfo" />
      </div>
    </div>
    <div class="chart-table2-container">
      <div class="warning-table-wrapper box-shadow-templat">
        <span class="table-head">报警记录</span>
        <el-input
          v-model="searchType"
          size="mini"
          @input="change($event)"
          placeholder="类型搜索"
          class="search"
        ></el-input>
        <el-input
          v-model="searchStatus"
          size="mini"
          @input="change($event)"
          placeholder="状态搜索"
          class="search"
        ></el-input>
        <div class="table-container e">
          <el-table
            :data="getPageData()"
            :row-style="tableRowStyle"
            :header-cell-style="tableHeaderColor"
            ref="multipleTable"
          >
            <el-table-column
              prop="id"
              label="编号"
              align="center"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="pointid"
              label="采集点"
              align="center"
              width="70"
            ></el-table-column>
            <el-table-column
              prop="type"
              label="类型"
              align="center"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="value"
              label="值"
              align="center"
              width="70"
            ></el-table-column>
            <el-table-column
              prop="starttime"
              label="报警时间"
              align="center"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              align="center"
              width="70"
            ></el-table-column>
            <el-table-column
              prop="solver"
              label="处理人"
              align="center"
              width="130"
            ></el-table-column>
            <el-table-column
              prop="solution"
              label="处理措施"
              align="center"
              width="130"
            ></el-table-column>
            <el-table-column
              prop="endtime"
              label="处理时间"
              align="center"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="bsu"
              label="BSU"
              align="center"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="bcu"
              label="BCU"
              align="center"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="bmu"
              label="BMU"
              align="center"
              width="100"
            ></el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="70"
            ><template slot-scope="scope">
                <div >
                  <el-button type="primary" icon="el-icon-edit" circle style="background-color:#73C0DE;border-color:#73C0DE" @click="editStatus(scope.row.id)"></el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          @current-change="current_change"
          @size-change="handleSizeChange"
          :current-page="currentPage"
          :page-sizes="[3, 5, 10, 15]"
          :page-size="pageSize"
          :total="warningTable.length"
          layout="total, sizes, prev, pager, next, jumper"
          background
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Chart from "@/components/Chart";
import List from "@/components/List";
import UserProfile from "@/components/Station/UserProfile.vue";
import StationProfile from "@/components/Station/WarningStationProfile.vue";
import {
  WarningWeekOption,
  WarningTypeWeekOption,
  WarningStatusOption,
  WarningTypeOption,
  WarningBmuOption,
} from "@/utils/chartOpt";
import {
  getWarningWeek,
  getWarningTypeWeek,
  getWarningStatus,
  getWarningType,
  getWarningBmu,
  getWarningTable,
} from "@/api/warning";
import { getUserInfo, getStationInfo } from "@/api/station";
export default {
  name: "Warning",
  components: { Chart, List, UserProfile, StationProfile },
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      //报警处理弹出表单
      warningformTitle: "处理报警", //表单标题
      warningFormVisible: false, //表单是否可见
      warningform: {
        id:"",
        solution: "",
      },
      selectOptions: [
        {
          value: "选项1",
          label: "已处理",
        },
        {
          value: "选项2",
          label: "未处理",
        },
      ],
      value: "", //与selectOptions里的value一致
      //报警信息
      weekOption: {},
      typeweekOption: {},
      statusOption: {},
      typeOption: {},
      bmuOption: {},
      warningTable: [],
      showTable: [],
      userInfo: {},
      stationInfo: {},
      pageSize: 3, //每页的数据条数
      currentPage: 1, //默认开始页面
      
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 打开对话框
    editStatus(id){
this.warningFormVisible = true;
this.warningform.id=id;
    },

    //提交表单,需要重写
    sureFormSubmit() {
      let _this = this;
      let api = "";
      _this.axios.post(api, {}).then((res) => {
        console.log(res);
      });
    },
    
    getData() {
      getWarningWeek().then((res) => {
        this.weekOption = WarningWeekOption(res.data);
      });

      getWarningTypeWeek().then((res) => {
        this.typeweekOption = WarningTypeWeekOption(res.data);
      });

      getWarningStatus().then((res) => {
        this.statusOption = WarningStatusOption(res.data);
      });

      getWarningType().then((res) => {
        this.typeOption = WarningTypeOption(res.data);
      });

      getWarningBmu().then((res) => {
        this.bmuOption = WarningBmuOption(res.data);
      });

      getWarningTable().then((res) => {
        this.warningTable = res.data;
      });

      getUserInfo().then((res) => {
        this.userInfo = res.data;
      });

      getStationInfo().then((res) => {
        this.stationInfo = res.data;
      });
    },
    getPageData() {
      var inputType = this.searchType && this.searchType.toLowerCase();
      var inputStatus=this.searchStatus && this.searchStatus.toLowerCase();
      var items = this.warningTable;
      var items1;
      if (inputType) {
        items = items.filter(function (item) {
          return Object.keys(item).some(function (key1) {
            return String(item.type).toLowerCase().match(inputType);
          });
        });
        // items1 = items1.slice(
        //   (this.currentPage - 1) * this.pageSize,
        //   this.currentPage * this.pageSize
        // );
      } 
      if(inputStatus){
        items = items.filter(function (item) {
          return Object.keys(item).some(function (key1) {
            return String(item.status).toLowerCase().match(inputStatus);
          });
        });
        // items1 = items1.slice(
        //   (this.currentPage - 1) * this.pageSize,
        //   this.currentPage * this.pageSize
        // );
      }
      items1 = items.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );
      // else {
        
      // }
      return items1;
    },
    change(e) {
      this.$forceUpdate();
    },
    //翻页
    current_change: function (currentPage) {
      this.currentPage = currentPage;
    },
    // 每页多少条
    handleSizeChange: function (val) {
      this.pageSize = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.profile-container {
  margin-left: 5px;
  width: 370px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
}
.warning-container {
  display: flex;
  flex-direction: column;
}
.warning-container-top {
  display: flex;
}
.flex-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 15px;
}
.charts-wrapper1 .chart-template {
  width: 49%;
}
.charts-wrapper2 .chart-template {
  width: 32.5%;
}
.warning {
  &-container {
    margin: 15px 10px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
    color: #1f2a49;
  }
}
.chart-table1-container {
  width: calc(100% - 385px);
  display: inline-block;
  vertical-align: top;
}
.chart-table2-container {
  width: calc(100% - 5px);
  display: inline-block;
  vertical-align: top;
}
.profile-container {
  display: flex;
  flex-direction: column;
}
.warning-table-wrapper {
  background: white;
  padding: 15px;
  border-radius: 15px;
  .table-head {
    font-size: 20px;
    font-weight: bold;
    color: #2c3653;
    margin-bottom: 5px;
    padding-left: 5px;
    left: 20px;
  }
  .search {
    width: 300px;
    margin-left: 20px;
  }
}
</style>
